<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>3d 翻页效果</title>
    <style>
        #my3dspace {
            perspective: 800px;
            perspective-origin: 50% 50%;
            overflow: hidden;
        }

        #pagegroup {
            width: 400px;
            height: 400px;
            margin: 0 auto;
            transform-style: preserve-3d;
            position: relative;
        }

        .page {
            width: 360px;
            height: 360px;
            padding: 20px;
            background-color: black;

            color: white;

            font-weight: bold;
            font-size: 360px;
            line-height: 360px;
            text-align: center;

            position: absolute;
        }

        #page1 {
            transform-origin: bottom;
            transition: transform 1s linear;
        }

        #page2,
        #page3,
        #page4,
        #page5,
        #page6 {
            transform-origin: bottom;
            transition: transform 1s linear;
            transform: rotateX(90deg);
            /* display: none; */
        }

        #op {
            text-align: center;
            margin: 40px auto;
        }
    </style>
    <script>
        let curIndex = 1

        function next() {
            //边界判定
            if (curIndex == 6) return
            // 取到当前显示的元素，然后翻转90度 到屏幕以外
            let curPage = document.getElementById('page' + curIndex);
            curPage.style.transform = 'rotateX(-90deg)'

            // 下一个页面
            curIndex++
            let nextPage = document.getElementById('page' + curIndex)
            nextPage.style.transform = 'rotateX(0)'
        }

        function prev() {
            if (curIndex == 1) return
            let curPage = document.getElementById('page' + curIndex);
            curPage.style.transform = 'rotateX(90deg)'

            curIndex--
            let prevPage = document.getElementById('page' + curIndex)
            prevPage.style.transform = 'rotateX(0)'




        }
    </script>
</head>

<body>
    <div id="my3dspace">
        <div id="pagegroup">
            <div class="page" id="page1">1</div>
            <div class="page" id="page2">2</div>
            <div class="page" id="page3">3</div>
            <div class="page" id="page4">4</div>
            <div class="page" id="page5">5</div>
            <div class="page" id="page6">6</div>
        </div>
    </div>
    <div id="op">
        <a href="javascript:next()">next</a>&nbsp; <a href="javascript:prev()">previous</a>
    </div>
</body>

</html>